<template>
  <div id="toptable">
    <el-row :gutter="20" style="margin: 0">
      <el-col :span="18" class="Echat">
        <div id="main"></div>
      </el-col>
      <el-col :span="6" id="rigBox">
        <div>
          <div id="sopan">代办提醒</div>
          <div class="sneBox" >
            <span>10</span>
            <router-link to=""><div class="text">待审核签约申请</div></router-link>
            <div class="redtx"><router-link to=""></router-link></div>
          </div>
          <div class="sneBox" >
            <span>10</span>
            <router-link to=""><div class="text">待审核服务申请</div></router-link>
            <div class="redtx"><router-link to=""></router-link></div>
          </div>
          <div class="sneBox">
            <span>10</span>
            <router-link to=""><div class="text">待完成</div></router-link>
            <div class="redtx"><router-link to=""></router-link></div>
          </div>
          <div class="sneBox">
            <span>10</span>
            <router-link to=""><div class="text">待回复消息</div></router-link>
            <div class="redtx"><router-link to=""></router-link></div>
          </div>
          <div class="sneBox">
            <span>10</span>
            <router-link to=""><div class="text">待处理续约</div></router-link>
            <div class="redtx"><router-link to=""></router-link></div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted ,computed,} from "vue";
import { useStore } from "vuex";
import * as echarts from "echarts";
export default defineComponent({
  name: "Bodywork",
  components: {},
  setup() {
    const store=useStore()
    store.dispatch('residents')
    store.dispatch('contract')
    store.dispatch('amount')
    let numresnum= computed(()=>{
      return store.state.numresnum
    })
    let contractnum=computed(()=>{
      return store.state.contractnum
    })
    let amountnum=computed(()=>{
      return store.state.amountnum
    })
    function tineopen(){
      let chartDom = document.getElementById("main")!;
      type EChartsOption = echarts.EChartsOption;
      let myChart = echarts.init(chartDom);
      let option: EChartsOption;
      option = {
        title: {
          text: "数据概况",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["居民数量", "签约量", "服务量"],
          icon: "rect",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["1/4", "1/5", "1/6", "1/7", "1/8", "1/9", "1/10"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "居民数量",
            type: "line",
            stack: "Total",
            color: "rgb(41,132,248)",
            data:numresnum.value,
          },
          {
            name: "签约量",
            type: "line",
            stack: "Total",
            color: "rgb(40,208,148)",
            data:contractnum.value,
          },
          {
            name: "服务量",
            type: "line",
            stack: "Total",
            color: "rgb(255,98,98)",
            data:amountnum.value,
          },
        ],
      };
        option && myChart.setOption(option);
    }
    onMounted(() => {
      setTimeout(()=>{
      
      tineopen()  
      },1000)
    });
    
    return {store};
  },
});
</script>

<style lang="less" scoped>
#toptable {
  padding-top: 40px;
  .Echat {
    box-shadow: 10px 10px 5px rgb(242, 245, 246);
    #main {
      height: 450px;
    }
  }
}
#rigBox {
  height: 450px;
  box-shadow: 10px 10px 5px rgb(242, 245, 246);
  #sopan {
    font-size: 16px;
    font-family: "PingFangSC-Medium", "PingFang SC Medium", "PingFang SC";
    font-weight: 500;
    
  }
  .sneBox {
    width: 100%;
    height: 85px;
    border-top: 1px solid rgba(242, 247, 251, 1);
    position: relative;
    span{
      position: absolute;
      font-size: 20px;
      left: 10%;
      top: 15%;
    }
    .text{
      position: absolute;
      left: 10%;
      top:60%;
      font-size:13px;
      color: #999999;
    }
    .redtx{
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 5px;
      background-color: red;
      right: 10%;
      top: 45%;
      cursor: pointer;
    }
  }
}
</style>